<template>
  <div class="page">
    <!-- 头部标题 -->
    <mu-appbar style="width: 100%;" color="primary">
      {{title}}
      <mu-menu slot="right">
        <mu-button flat @click="search()">
          <mu-icon value="search"></mu-icon>
        </mu-button>
      </mu-menu>
    </mu-appbar>

    <div class="show">

      <div class="slipe">
        <mu-carousel :interval="3000">
          <mu-carousel-item v-for="(item,index) in carousel" :key="index">
            <img :src="item">
          </mu-carousel-item>
        </mu-carousel>
      </div>

      <mu-container class="button-wrapper">
        <mu-button class="menu_btn" v-for="(item,index) in menu" :key="index" color="primary" @click="goMenu(item.to)">
          <mu-icon :value="item.icon"></mu-icon>
          {{item.name}}
        </mu-button>
      </mu-container>


      <mu-card v-for="(item,index) in content" :key="index" style="width: 100%; max-width: 375px; margin: 0 auto;">
        <mu-card-title :title="item.author"
                       :sub-title="item.date"></mu-card-title>
        <mu-card-text>
          <div v-if="item.haveImg">
            <img v-for="(imgList,imgIndex) in item.img" :key="imgIndex" :src="imgList"/>
          </div>
          <br/>
          {{item.text}}
        </mu-card-text>
        <mu-card-actions>
          <mu-button flat color="error">点赞({{item.like}})</mu-button>
          <mu-button flat color="primary">评论({{item.comment}})</mu-button>
          <mu-button flat color="success">转发({{item.forwards}})</mu-button>
        </mu-card-actions>
      </mu-card>


    </div>

    <Down class="Down"></Down>
  </div>

</template>

<script>
  import Top from '@/components/common/commonTop'
  import Down from '@/components/common/commonDown'
  import img1 from '@/assets/1000236.jpg'
  import img2 from '@/assets/1000556.jpg'
  import img3 from '@/assets/1000578.jpg'

  export default {
    name: "index",
    components: {
      Top, Down
    },
    computed: {},
    data() {
      return {
        carousel: [img1, img2, img3],
        title: '长久未央blog',
        menu: [
          {name: '随手记', to: "/record", icon: 'create'},
          {name: '发心情', to: '/method', icon: 'details'},
          {name: '推好物', to: '/share', icon: 'straighten'},
          {name: '美文集', to: '/article', icon: 'import_contacts'},
          {name: '趣段子', to: '/joke', icon: 'library_books'},
          {name: '未确定', to: '/', icon: 'grade'}
        ],
        content: [
          {
            title: '测试标题',
            isHot: true,
            date: '2019年8月18日 11:28:46',
            author:'挽梦',
            text: '散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。\n' +
              '    调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。\n' +
              '    似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，\n' +
              '    找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！',
            haveImg: true,
            img: [img1, img2],
            like: 10,
            comment: 3,
            forwards: 4
          },
          {
            title: '测试标题2',
            isHot: false,
            date: '2019年8月18日 11:28:46',
            author:'挽梦',
            text: '散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。\n' +
              '    调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。\n' +
              '    似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，\n' +
              '    找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！',
            haveImg: false,
            img: [],
            like: 20,
            comment: 4,
            forwards: 5
          }
        ]
      }
    },
    methods: {
      goMenu(path) {
        this.$router.push({path: path})
      },
      search() {
        this.$router.push({path: '/search'})
      },
      test() {
        alert(123)
      }
    }
  }
</script>

<style scoped>
  .page {
    width: 100%;
    height: 100vh;
  }

  .mu-carousel {
    margin-top: 10px;
    height: 30vh;
  }

  .mu-carousel img {
    width: 100%;
    height: auto;
  }

  .button-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .menu_btn {
    margin-top: 10px;
  }

  .list-wrap {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .show {
    width: 100%;
    height: 80vh;
    overflow: scroll;
  }

  img {
    width: 100%;
    height: 100%;
  }
  ..mu-card-text{
    padding: 0 16px;
  }
</style>
